<template>
    <div>
      <h1>装备列表</h1>
      <el-table :data="items" border>
        <el-table-column prop="id" label="ID" width="220"></el-table-column>
         <el-table-column prop="name" label="分类名称"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <el-button @click="$router.push({path: '/items/edit',query: {id : scope.row.id}})" type="primary" size="small">编辑</el-button>
            <el-button @click="handleClick(scope.row.id)" type="primary" size="small">查看</el-button>
            <el-button @click="deteleItems(scope.row.id)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next, sizes, total, jumper"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >

      </el-pagination>
    </div>
</template>

<script>
    export default {
        data(){
          return {
            items:[],
            condtion:{
               "page" : 1,
               "limit": 10
            },
            pagesize: 10,
            total: 0
          }
        },
      //初始化默认化获取数据
        created(){
           this.fetch()

        },
        methods: {
          async fetch() {
           const res = await this.$http.post("/cms/items/list.json" ,this.condtion)
            this.items = res.data.data
            this.total = res.data.count
          },

          handleCurrentChange(cpage) {
            this.condtion.page = cpage
            this.fetch()
          }
          ,
          handleSizeChange(cpage) {
            this.condtion.limit= cpage
          },
          handleClick(row){
            console.log(row)
          },

          async  deteleItems(row){
              const  res = await this.$http.post("/cms/items/delete.json/"+row)
              this.fetch();
              this.$message("删除成功！")
          }
        }
    }

</script>

<style scoped>

</style>
